<template>
  <div class="bgs-screen" :class="userLanguage.code == 'zh_CN' ? 'bgs-cn' : 'bgs-en'">
    <img src="@/assets/images/public/pin_bg.png" class="bg-img" alt="">
    <div class="rect-content" >
      <div class="head-sty">
        <div class="left">
          <img src="@/assets/images/public/dian.png" class="icon-img" alt="">
          <span class="tit-text">{{ $t("goods.group_play_text4") }}</span>
          <span class="area-rect">{{ $t('goods.group_play_text54') }} {{ userCurrencyAll.currencySymbol||'' }}{{ subtract }}</span>
        </div>
        <div class="right" v-html="$t('goods.group_play_text7', { num: infoData.groupSuccess || 0 })"></div>
      </div>
      <div class="write-rect">
        <div class="swiper swiperSty">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in listArr" :key="index">
              <div class="list-sty">
                <div class="left">
                  <span class="create-avatar" :style="{ background: calculateBg(item.email) }">
                    {{ calculateText(item.userName) }}
                  </span>
                  <span class="name-text">
                    {{ item.userName }} {{ getStatusText(item) }}
                  </span>
                </div>
                <div class="right">{{ $t('goods.group_play_text6') }} {{ item.dateTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { avatarRandomBg } from "@/common/common";
import { bigDiv } from "@/common/digital-computation";
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { groupUser } from "@/api/product";
export default {
  props: {
    userCurrency: {
      type: String,
      default: ''
    },
    infoData: {
      type: [Object, String],
      default: null
    },
    subtract: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      headSwiper: '',
      autoplayConfig: {
        enabled: false,
        delay: 5000
      },
      listArr: []
    }
  },
  watch: {
    'listArr.length': {
      immediate: false,
      handler(newLength) {
        if (newLength > 1) {
          this.autoplayConfig.enabled = true;
        } else {
          this.autoplayConfig.enabled = false;
        }
        if (this.headSwiper) {
          if (this.autoplayConfig.enabled) {
            this.headSwiper.params.autoplay = {
              delay: this.autoplayConfig.delay,
              disableOnInteraction: false
            };
            this.headSwiper.autoplay.start();
          } else {
            this.headSwiper.autoplay.stop();
          }
        }
      }
    }
  },
  computed: {
    ...mapState({
      userLanguage: state => state.user.userLanguage,
      userCurrencyAll: (state) => {
        return state.user.userCurrency;
      }
    }),
    getStatusText() {
      return (item) => {
        if (item.status === 'GROUP_SUCCESS') {
          return this.$t('goods.group_play_text5');
        } else if (item.status === 'WAIT_GROUP') {
          return this.$t('goods.group_play_text56');
        }
        return '';
      };
    }
  },
  created() {
    this.getGroupUser();
  },
  methods: {
    getGroupUser() {
      this.listArr = [];
      groupUser().then((res) => {
        this.listArr = res.result || [];
        if (this.headSwiper) {
          this.headSwiper.destroy(true, true);
        }
        this.$nextTick(() => {
          this.initSwiper();
        });
      })
    },
    // 初始化swiper
    initSwiper() {
      const self = this;
      this.$nextTick(() => {
        this.headSwiper = new Swiper(".swiperSty", {
          effect: "cards",// 切换效果
          cubeEffect: {
            slideShadows: false,
            shadow: false, // 也可以尝试禁用阴影
          },
          allowTouchMove: false,
          parallax: true,
          autoplay: this.autoplayConfig.enabled ? {
            delay: this.autoplayConfig.delay,
            disableOnInteraction: false
          } : false,
          direction: 'vertical',// horizontal-水平  vertical-垂直
          initialSlide: 0,// 初始化显示第一个
          speed: 2000,// 单次的切换速度
          slidesPerView: 2,
          loop: false,// 循环
          spaceBetween: 0,
          // 监听 slideChange 事件
          on: {
            slideChange() {
              // 获取当前显示的幻灯片索引
              const currentIndex = this.activeIndex;
              // 获取幻灯片总数
              const totalSlides = Number(bigDiv(this.slides.length, 2));
              if (currentIndex === totalSlides - 1) {
                self.getGroupUser();
              }
            }
          }
        });
      })
    },
    calculateBg(email) {
      const result = avatarRandomBg(email);
      return result.bg;
    },
    calculateText(email) {
      const result = avatarRandomBg(email);
      return result.text;
    },
  }
}
</script>
<style lang="less" scoped>
.bgs-cn{
  width: 758px;
  .bg-img{
    width: 758px;
  }
}
.bgs-en{
  width: 946px;
  .bg-img{
    width: 946px;
  }
}
.bgs-screen {
  padding: 16px 20px;
  background: linear-gradient(to right, #FF325E 0%, #FF326C 20%, #FF3810 100%);
  border-radius: 12px 12px 12px 12px;
  position: relative;
  box-sizing: border-box;
  height: 206px;
  .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 206px;
  }

  .rect-content {
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .head-sty {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
      .left {
        display: inline-flex;
        align-items: center;

        .icon-img {
          width: 20px;
          height: 20px;
        }

        .tit-text {
          font-family: Open Sans, Open Sans;
          font-weight: bold;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 26px;
          margin-left: 6px;
        }

        .area-rect {
          padding: 2px 12px;
          border-radius: 4px;
          background: #FFFFFF;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #FF3448;
          line-height: 19px;
          margin-left: 12px;
        }
      }

      .right {
        font-family: Open Sans, Open Sans;
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 21px;

        :deep(span) {
          color: #F1FF29;
          font-weight: 600;
          font-style: italic;
        }
      }
    }

    .write-rect {
      width: 100%;
      height: 132px;
      padding: 16px 16px 0 16px;
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      margin-top: 12px;

      :deep(.swiper-container-cube .swiper-cube-shadow) {
        background: none;
      }

      .swiperSty {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .swiper-wrapper {

          .swiper-slide {
            width: 100%;

            .list-sty {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20px;

              .left {
                display: flex;
                align-items: center;

                .create-avatar {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  font-weight: 500;
                  font-size: 16px;
                  color: #FFFFFF;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .name-text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 16px;
                  color: #1E1714;
                  line-height: 19px;
                  margin-left: 12px;
                }
              }

              .right {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #1E1714;
                line-height: 16px;
              }
            }

            .list-sty:first-child {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
</style>
